<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0078)http://www.itivy.com/jquery/archive/2011/7/6/jquery-get-post-getjson-ajax.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" async="" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/ga.js"></script><script src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/shares.php" charset="utf-8"></script><link rel="stylesheet" type="text/css" href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/main.css" title="style"><title>
	
    深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园

</title>
    <meta name="keywords" content="jquery,get,post,getJSON,ajax"><meta name="description" content="原创文章，欢迎转载，转载请注明出处，谢谢合作
当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快...">
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jquery-1.4.1.min.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/kindeditor-min.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jquery.form.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/TimeConvertor.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/shCore.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/shAutoloader.js"></script>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/myloader.js"></script>
    <link type="text/css" rel="stylesheet" href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/shCoreDefault.css">
    <script type="text/javascript">
        $(document).ready(function () {
            SyntaxHighlighter.all({ 'toolbar': false });
        });
    </script>
<link type="text/css" rel="stylesheet" href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/default.css"></head>
<body style=""><link href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jiathis_counter.css" rel="stylesheet" type="text/css"><script src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jiathis.php" charset="utf-8"></script><link href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jiathis_share.css" rel="stylesheet" type="text/css"><iframe frameborder="0" style="position: absolute; display: none; opacity: 0;"></iframe><div class="jiathis_style" style="position: absolute; z-index: 1000000000; display: none; top: 50%; left: 50%; overflow: auto;"></div><div class="jiathis_style" style="position: absolute; z-index: 1000000000; display: none; overflow: auto;"></div><iframe frameborder="0" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jiathis_utility.html" style="display: none;"></iframe>
    <div id="top">
        <h2 class="subtitle">
            每天给大家分享一点jQuery，同时也不断充实自己</h2>
        <h1 class="title">
            <a href="http://www.itivy.com/jquery">jQuery资源宝库</a></h1>
    </div>
    <div id="navbar">
        <div class="nav_box">
            <h3>
                导航 »</h3>
            <div class="nav_box_content">
                <ul>
                    <li><a href="http://www.itivy.com/">青藤园首页</a></li>
                    <li>
                        <a href="http://www.itivy.com/jquery">首页</a></li>
                    <li>
                        <a href="http://www.itivy.com/jquery/Rss">订阅</a></li>
                    <li>
                        <a href="http://www.itivy.com/MyAdmin/Post">写博客</a></li>
                </ul>
            </div>
        </div>
        
        
<div class="nav_box">
    
    <h3>
        公告</h3>
    
    <div class="nav_box_content">
        <p>
            </p><p>本人十分酷爱jQuery，今后就努力给大家分享一些jQuery相关的知识和资源，欢迎大家常来逛逛:-）</p>
        <p></p>
    </div>
</div>

<div class="nav_box">
    
    <h3>
        搜索</h3>
    
    <div class="nav_box_content">
        <form action="http://www.itivy.com/jquery/search">
        <div class="search">
            <input type="text" name="keyword" class="styled">
            <input type="submit" value="search" class="button">
        </div>
        </form>
    </div>
</div>

<div class="nav_box">
    
    <h3>
        文章分类</h3>
    
    <div class="nav_box_content">
        <ul>
            
            <li><a href="http://www.itivy.com/jquery/rss/634441014016170753" class="rss">(rss)</a><a href="http://www.itivy.com/jquery/category/634441014016170753">
                jQuery实用插件
                (25)</a> </li>
            
            <li><a href="http://www.itivy.com/jquery/rss/634441017662651687" class="rss">(rss)</a><a href="http://www.itivy.com/jquery/category/634441017662651687">
                jQuery教程及参考手册
                (12)</a> </li>
            
            <li><a href="http://www.itivy.com/jquery/rss/634441018142926210" class="rss">(rss)</a><a href="http://www.itivy.com/jquery/category/634441018142926210">
                jQuery动态资讯
                (0)</a> </li>
            
            <li><a href="http://www.itivy.com/jquery/rss/634441028429030243" class="rss">(rss)</a><a href="http://www.itivy.com/jquery/category/634441028429030243">
                jQuery游戏
                (3)</a> </li>
            
            <li><a href="http://www.itivy.com/jquery/rss/634441028788123107" class="rss">(rss)</a><a href="http://www.itivy.com/jquery/category/634441028788123107">
                jQuery开发笔记
                (26)</a> </li>
            
        </ul>
    </div>
</div>

<div class="nav_box">
    
    <h3>
        文章归档</h3>
    
    <div class="nav_box_content">
        <ul>
            
            <li><a href="http://www.itivy.com/jquery/archive/2012/2">
                2012年2月 (2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2012/1">
                2012年1月 (5)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/12">
                2011年12月 (1)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11">
                2011年11月 (9)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/10">
                2011年10月 (6)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/9">
                2011年9月 (2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/8">
                2011年8月 (7)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7">
                2011年7月 (14)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6">
                2011年6月 (20)</a></li>
            
        </ul>
    </div>
</div>

<div class="nav_box">
    
    <h3>
        最新评论</h3>
    
    <div class="nav_box_content">
        <ul>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html#635063373033617701">
                您好
无意中看到你的文章是关于FANCYBOX的&nbsp;...</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html#634995663500445583">
                感谢楼主的ctrl+c和ctrl+v，有些人连这些都懒得弄，...</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html#634995662523928750">
                @nek:共同学习，感谢楼主ctrl+c和ctrl+v，某些...</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11/3/jquery-json.html#634993959404405942">
                r4df&nbsp;</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/2/jquery-image-player-prettyphoto-usage.html#634854816296491132">
                @北京旅游:这个真是好东西，自带twitter，facebo...</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html#634840903374909688">
                ajax怎么用?</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/2/jquery-image-player-prettyphoto-usage.html#634678605095966438">
                根据每次搜索该插件时来到你站点。悲催的，愣是调试不成功啊！</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11/6/jquery-news-ticker-usage.html#634623260383831547">
                不能点击？</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11/6/jquery-news-ticker-usage.html#634623258939079634">
                呵呵还不错</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2012/1/15/jquery-media-plugin.html#634623039997480807">
                非常可以学习了
弱弱的问一句这个播放器可不可以播放word或...</a></li>
            
        </ul>
    </div>
</div>

<div class="nav_box">
    
    <h3>
        阅读排行</h3>
    
    <div class="nav_box_content">
        <ul>
            
            <li><a href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园.html">
                深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法(20141)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html">
                好用的jquery图片播放插件Fancybox使用方法(8817)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2012/1/15/jquery-media-plugin.html">
                jQuery多媒体播放器插件jQuery Media Plugin使用方法(5041)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/2/jquery-image-player-prettyphoto-usage.html">
                jQuery图片播放插件prettyPhoto使用介绍(4257)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/30/jquery-image-player-colorbox.html">
                jQuery图片播放插件ColorBox使用方法(2609)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/8/jquery-ui-dialog-usage.html">
                jQuery UI dialog 使用方法详解(2576)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/18/jquery-slider-nav-demo.html">
                jquery打造一款侧边弹出的垂直导航(2464)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/22/jquery-image-slideshow-like-apple.html">
                一款仿苹果样式的jquery图片播放插件【附源码】(2359)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/23/how-jquery-parse-json-data.html">
                如何用jquery解析json格式的数据(2286)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/27/jquery-image-player-lightbox-usage.html">
                jquery图片播放插件lightBox使用详解(2203)</a></li>
            
        </ul>
       
    </div>
     
</div>

<div class="nav_box">
    
    <h3>
        评论排行</h3>
    
    <div class="nav_box_content">
        <ul>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/28/jquery-fancybox-usage.html">
                好用的jquery图片播放插件Fancybox使用方法(6)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/2/jquery-image-player-prettyphoto-usage.html">
                jQuery图片播放插件prettyPhoto使用介绍(4)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11/6/jquery-news-ticker-usage.html">
                基于jquery的即时新闻展示插件jQuery News Ticker使用介绍(2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/11/3/jquery-json.html">
                jquery json解析详解(2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/7/18/jquery-slider-nav-demo.html">
                jquery打造一款侧边弹出的垂直导航(2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/27/jquery-image-player-lightbox-usage.html">
                jquery图片播放插件lightBox使用详解(2)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2012/1/15/jquery-media-plugin.html">
                jQuery多媒体播放器插件jQuery Media Plugin使用方法(1)</a></li>
            
            <li><a href="http://www.itivy.com/jquery/archive/2011/6/22/jquery-image-slideshow-like-apple.html">
                一款仿苹果样式的jquery图片播放插件【附源码】(1)</a></li>
            
        </ul>
        
    </div>
</div>

        <div class="nav_box">
            
            <h3>
                推荐链接</h3>
            
            <div class="nav_box_content">
                <p><a target="_blank" href="http://www.itivy.com/ivy">IT青藤屋</a><br>
<a target="_blank" href="http://www.itivy.com/android">Android Studio</a><br>
<a target="_blank" href="http://jquery.com/">jQuery官方网站</a></p></div>
        </div>
        
        
    </div>
    <div id="main">
        
    
    <div class="artical_text">
        <h1>
            <a href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园.html" id="intro">
                深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法</a></h1>
        <div class="long_text">
            
<div class="google_ad" style="padding: 5px 0">
            
			<script type="text/javascript">/*文章底部横幅广告*/ var cpro_id = 'u760648';</script><script src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/c.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/ecom"></script><div style="display:none">-</div> <iframe id="cproIframe1" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/uijs(1).html" width="728" height="90" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
        </div>
            <div style="float:right;margin:0 0 5px 5px">
			   
				<script type="text/javascript">/*300*250，创建于2011-12-15*/ var cpro_id = 'u711900';</script><script src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/c.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/ecom(1)"></script><div style="display:none">-</div> <iframe id="cproIframe2" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/uijs.html" width="300" height="250" align="center,center" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" allowtransparency="true"></iframe>
			   </div>
            <p><span style="font-weight:bold;">原创文章，欢迎转载，转载请注明出处，谢谢合作</span></p>
<p>当我们用javascript写ajax程序写得很“开心”的时候，突然有人告诉你有一种东西叫jquery，它会告诉你不直接和HttpRequest是多么的快乐，同时你再也不需要再烦恼纠结的ajax乱码问题，更幸福的是你的js代码将大大地简化，看完本文，你会发现，ajax，简单的来讲就是一句话的事情。</p>
<p>本文重点是来讲讲jQuery中调用ajax的4种方法：$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识，或者没有ajax的概念，那么请先去问问google老大，再来读本文。</p>
<p style="font-weight:bold;">1、$.get</p>
<p>$.get()方法使用GET方式来进行异步请求，它的语法结构为：</p>
<p><span style="background-color:#b8d100;">$.get( url [, data] [, callback] ) </span></p>
<p>解释一下这个函数的各个参数：</p>
<p>url：string类型，ajax请求的地址。</p>
<p>data：可选参数，object类型，发送至服务器的key/value数据会作为QueryString附加到请求URL中。</p>
<p>callback：可选参数，function类型，当ajax返回成功时自动调用该函数。 </p>
<p>最后写一个$.get()的实例供大家参考：</p>
<p></p>
<div><div id="highlighter_915740" class="syntaxhighlighter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$.get(</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"submit.aspx"</code><code class="js plain">,{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">id:&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="js string">'123'</code><code class="js plain">,</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">name:&nbsp;&nbsp; </code><code class="js string">'青藤园'</code><code class="js plain">,</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code><code class="js keyword">function</code><code class="js plain">(data,state){</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//这里显示从服务器返回的数据</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(data);</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//这里显示返回的状态</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(state);</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number11 index10 alt2"><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div><span style="font-weight:bold;">2、$.post()</span><p></p>
<p>$.post()方法使用POST方式来进行异步请求，它的语法结构为：</p>
<p><span style="background-color:#99bb00;">$.post(url,[data],[callback],[type]) </span></p>
<p>这个方法和$.get()用法差不多，唯独多了一个type参数，那么这里就只介绍type参数吧，其他的参考上面$.get()的。</p>
<p>type：type为请求的数据类型，可以是html,xml,json等类型，如果我们设置这个参数为：json，那么返回的格式则是json格式的，如果没有设置，就和$.get()返回的格式一样，都是字符串的。</p>
<p>最后写一个$.post()的实例供大家参考：</p>
<p></p>
<div><div id="highlighter_20742" class="syntaxhighlighter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$.post(</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"submit.aspx"</code><code class="js plain">,{</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">id:&nbsp;&nbsp;&nbsp;&nbsp; </code><code class="js string">'123'</code><code class="js plain">,</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">name:&nbsp;&nbsp; </code><code class="js string">'青藤园'</code><code class="js plain">,</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code><code class="js keyword">function</code><code class="js plain">(data,state){</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//这里显示从服务器返回的数据</code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(data);</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js comments">//这里显示返回的状态</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(state);</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js string">"json"</code></div><div class="line number12 index11 alt1"><code class="js plain">)</code></div></div></td></tr></tbody></table></div></div><span style="font-weight:bold;">3、$.getJSON()</span><p></p>
<p>$.getJSON()是专门为ajax获取json数据而设置的，并且支持跨域调用，其语法的格式为：</p>
<p><span style="background-color:#99bb00;">getJSON(url,[data],[callback]) </span></p>
<p>url：string类型， 发送请求地址 <br>
data ：可选参数， 待发送 Key/value 参数 ，同get，post类型的data<br>
callback ：可选参数，载入成功时回调函数，同get，post类型的callback</p>
<p>JSON是一种理想的数据传输格式，它能够很好的融合与JavaScript或其他宿主语言，并且可以被JS直接使用。使用JSON相比传统的通过
 GET、POST直接发送“裸体”数据，在结构上更为合理，也更为安全。至于jQuery的getJSON()函数，只是设置了JSON参数的 
ajax()函数的一个简化版本。这个函数也是可以跨域使用的，相比get()、post()有一定优势。另外这个函数可以通过把请求url写 
成"myurl?callback=X"这种格式，让程序执行回调函数X。</p>
<p style="font-weight:bold;">4、$.ajax()</p>
<p>$.ajax()是jquery中通用的一个ajax封装，其语法的格式为：</p>
<p><span style="background-color:#99bb00;">$.ajax(options)</span></p>
<p>其中options是一个object类型，它指明了本次ajax调用的具体参数，这里我把最常用的几个参数附上</p>
<p></p>
<div><div id="highlighter_991974" class="syntaxhighlighter  js"><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td class="gutter"><div class="line number1 index0 alt2">1</div><div class="line number2 index1 alt1">2</div><div class="line number3 index2 alt2">3</div><div class="line number4 index3 alt1">4</div><div class="line number5 index4 alt2">5</div><div class="line number6 index5 alt1">6</div><div class="line number7 index6 alt2">7</div><div class="line number8 index7 alt1">8</div><div class="line number9 index8 alt2">9</div><div class="line number10 index9 alt1">10</div><div class="line number11 index10 alt2">11</div><div class="line number12 index11 alt1">12</div><div class="line number13 index12 alt2">13</div><div class="line number14 index13 alt1">14</div></td><td class="code"><div class="container"><div class="line number1 index0 alt2"><code class="js plain">$.ajax({</code></div><div class="line number2 index1 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">url: </code><code class="js string">'submit.aspx'</code><code class="js plain">,</code></div><div class="line number3 index2 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">datatype: </code><code class="js string">"json"</code><code class="js plain">,</code></div><div class="line number4 index3 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">type: </code><code class="js string">'post'</code><code class="js plain">,</code></div><div class="line number5 index4 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">success: </code><code class="js keyword">function</code> <code class="js plain">(e) {&nbsp;&nbsp; </code><code class="js comments">//成功后回调</code></div><div class="line number6 index5 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(e); </code></div><div class="line number7 index6 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code></div><div class="line number8 index7 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">error: </code><code class="js keyword">function</code><code class="js plain">(e){&nbsp;&nbsp;&nbsp; </code><code class="js comments">//失败后回调</code></div><div class="line number9 index8 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(e);</code></div><div class="line number10 index9 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">},</code></div><div class="line number11 index10 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">beforeSend: </code><code class="js keyword">function</code><code class="js plain">(){&nbsp; /发送请求前调用，可以放一些</code><code class="js string">"正在加载"</code><code class="js plain">之类额话</code></div><div class="line number12 index11 alt1"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">alert(</code><code class="js string">"正在加载"</code><code class="js plain">);</code></div><div class="line number13 index12 alt2"><code class="js spaces">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code class="js plain">}</code></div><div class="line number14 index13 alt1"><code class="js plain">})</code></div></div></td></tr></tbody></table></div></div>好了，以上就是jquery实现ajax调用的几种方法，希望对大家有所帮助。<p></p>
        </div>
		
        <div class="tag_list">
            
标签：

<a href="http://www.itivy.com/jquery/search?keyword=jquery" target="_blank">jquery</a>,

<a href="http://www.itivy.com/jquery/search?keyword=get" target="_blank">get</a>,

<a href="http://www.itivy.com/jquery/search?keyword=post" target="_blank">post</a>,

<a href="http://www.itivy.com/jquery/search?keyword=getJSON" target="_blank">getJSON</a>,

<a href="http://www.itivy.com/jquery/search?keyword=ajax" target="_blank">ajax</a>

        </div>
        
        <div class="descr">
            <!-- JiaThis Button BEGIN -->
            <div id="ckepop" style="float: right; padding-top: 3px">
                <span class="jiathis_txt">分享到：</span> <a class="jiathis_button_qzone" title="分享到QQ空间"><span class="jiathis_txt jiathis_separator jtico jtico_qzone">QQ空间</span></a> <a class="jiathis_button_tsina" title="分享到新浪微博"><span class="jiathis_txt jiathis_separator jtico jtico_tsina">新浪微博</span></a> <a class="jiathis_button_renren" title="分享到人人网"><span class="jiathis_txt jiathis_separator jtico jtico_renren">人人网</span></a>
                <a href="http://www.jiathis.com/share/" class="jiathis jiathis_txt jiathis_separator jtico jtico_jiathis" target="_blank">更多</a> <a class="jiathis_counter_style"><span class="jiathis_button_expanded jiathis_counter jiathis_bubble_style" id="jiathis_counter_66" title="累计分享1次">1</span></a>
            </div>
            <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jia.js" charset="utf-8"></script><script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/plugin.client.js" charset="utf-8"></script><div style="position:absolute;width:0px;height:0px;"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="0" height="0" id="JIATHISSWF" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab"><param name="allowScriptAccess" value="always"><param name="swLiveConnect" value="true"><param name="movie" value="http://www.jiathis.com/code/swf/m.swf"><param name="FlashVars" value="z=a"><embed name="JIATHISSWF" src="http://www.jiathis.com/code/swf/m.swf" flashvars="z=a" width="0" height="0" allowscriptaccess="always" swliveconnect="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"></object></div>
            <!-- JiaThis Button END -->
            Posted by <a href="http://www.itivy.com/jquery">
                jQuery小子</a> @
            2011-7-6 20:26:39
            <a href="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园.html">阅读</a>(20142) <a href="http://www.itivy.com/jquery/archive/2011/7/6/jquery-get-post-getjson-ajax.html#comment">
                评论</a>(0)
            
            <br>
            
            上一篇：<a href="http://www.itivy.com/jquery/archive/2011/7/6/jquery-div-rotate.html">jQuery实现翻转效果菜单</a><br>
            
            下一篇：<a href="http://www.itivy.com/jquery/archive/2011/7/8/jquery-ui-dialog-usage.html">jQuery UI dialog 使用方法详解</a><br>
            
        </div>
        
<h3 id="comment">
    我也来参与讨论</h3>
<ol id="commentlist">
    
</ol>

<div class="post_comments">
    <div id="post_head">
        <span class="count">你还可以输入<em id="num">600</em>/600个字符</span> <span class="post_title">
            发表评论</span>
    </div>
    <form id="NewCommentForm" action="" method="post">
    
    <div class="c_block">称呼：<input type="text" id="PosterName" name="PosterName" style="width:180px" class="input_text"> (必填) <a href="http://passport.itivy.com/common/login?ReturnUrl=http%3a%2f%2fwww.itivy.com%2fjquery%2farchive%2f2011%2f7%2f6%2fjquery-get-post-getjson-ajax.html">登录</a> | <a href="http://passport.itivy.com/common/register">开通博客</a></div>
    <div class="c_block">邮箱：<input type="text" id="PosterEmail" name="PosterEmail" style="width:180px" class="input_text"> (选填) 你的邮箱地址不会被公开</div>
    <div class="c_block">网站：<input type="text" id="PosterWebsite" name="PosterWebsite" style="width:180px" class="input_text"> (选填)</div>
    <script type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/jquery.cookie.js"></script>
    <script type="text/javascript">
        var posterEmail = $.cookie("PosterEmail");
        var posterName = $.cookie("PosterName");
        var posterWebsite = $.cookie("PosterWebsite");
        if (posterEmail != null) {
            $("#PosterEmail").val(posterEmail);
        }
        if (posterName != null) {
            $("#PosterName").val(posterName);
        }
        if (posterWebsite != null) {
            $("#PosterWebsite").val(posterWebsite);
        }
    </script>
    
    <div id="ReContainer"></div>
    <table cellpadding="0" cellspacing="0" border="0" class="ke-container" style="width: 700px; height: 220px;"><tbody><tr><td class="ke-toolbar-outer"><table cellpadding="0" cellspacing="0" border="0" class="ke-toolbar" style="height: 24px;"><tbody><tr><td><table cellpadding="0" cellspacing="0" border="0" class="ke-toolbar-table"><tbody><tr><td><a class="ke-icon" href="javascript:;" title="字体"><span class="ke-common-icon ke-common-icon-url ke-icon-fontname"></span></a></td><td><a class="ke-icon" href="javascript:;" title="文字大小"><span class="ke-common-icon ke-common-icon-url ke-icon-fontsize"></span></a></td><td><div class="ke-toolbar-separator"></div></td><td><a class="ke-icon" href="javascript:;" title="文字颜色"><span class="ke-common-icon ke-common-icon-url ke-icon-textcolor"></span></a></td><td><a class="ke-icon" href="javascript:;" title="文字背景"><span class="ke-common-icon ke-common-icon-url ke-icon-bgcolor"></span></a></td><td><a class="ke-icon" href="javascript:;" title="粗体(Ctrl+B)"><span class="ke-common-icon ke-common-icon-url ke-icon-bold"></span></a></td><td><a class="ke-icon" href="javascript:;" title="斜体(Ctrl+I)"><span class="ke-common-icon ke-common-icon-url ke-icon-italic"></span></a></td><td><a class="ke-icon" href="javascript:;" title="下划线(Ctrl+U)"><span class="ke-common-icon ke-common-icon-url ke-icon-underline"></span></a></td><td><a class="ke-icon" href="javascript:;" title="删除格式"><span class="ke-common-icon ke-common-icon-url ke-icon-removeformat"></span></a></td><td><div class="ke-toolbar-separator"></div></td><td><a class="ke-icon" href="javascript:;" title="左对齐"><span class="ke-common-icon ke-common-icon-url ke-icon-justifyleft"></span></a></td><td><a class="ke-icon" href="javascript:;" title="居中"><span class="ke-common-icon ke-common-icon-url ke-icon-justifycenter"></span></a></td><td><a class="ke-icon" href="javascript:;" title="右对齐"><span class="ke-common-icon ke-common-icon-url ke-icon-justifyright"></span></a></td><td><a class="ke-icon" href="javascript:;" title="编号"><span class="ke-common-icon ke-common-icon-url ke-icon-insertorderedlist"></span></a></td><td><a class="ke-icon" href="javascript:;" title="项目符号"><span class="ke-common-icon ke-common-icon-url ke-icon-insertunorderedlist"></span></a></td><td><div class="ke-toolbar-separator"></div></td><td><a class="ke-icon" href="javascript:;" title="插入表情"><span class="ke-common-icon ke-common-icon-url ke-icon-emoticons"></span></a></td><td><a class="ke-icon" href="javascript:;" title="图片"><span class="ke-common-icon ke-common-icon-url ke-icon-image"></span></a></td><td><a class="ke-icon" href="javascript:;" title="超级链接"><span class="ke-common-icon ke-common-icon-url ke-icon-link"></span></a></td><td><a class="ke-icon" href="javascript:;" title="取消超级链接"><span class="ke-common-icon ke-common-icon-url ke-icon-unlink"></span></a></td></tr><tr><td></td></tr></tbody></table></td></tr></tbody></table></td></tr><tr><td class="ke-textarea-outer"><table cellpadding="0" cellspacing="0" border="0" class="ke-textarea-table"><tbody><tr><td><iframe class="ke-iframe" frameborder="0" style="height: 185px;"></iframe><textarea class="ke-textarea" style="display: none; height: 185px;"></textarea></td></tr></tbody></table></td></tr><tr><td class="ke-bottom-outer"><table class="ke-bottom" cellpadding="0" cellspacing="0" border="0" style="height: 11px;"><tbody><tr><td class="ke-bottom-left"><span class="ke-bottom-left-img"></span></td><td class="ke-bottom-right" style="cursor: s-resize;"><span class="ke-bottom-right-img" style="visibility: hidden;"></span></td></tr></tbody></table></td></tr></tbody></table><textarea id="Message" name="Message" cols="100" rows="8" style="width: 700px; height: 300px; display: none;"></textarea>
    <div class="c_block">验证码：<input type="text" id="VerifyCode" name="VerifyCode" class="input_text"> (必填)</div>
    <div><img src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/ImageHandler.ashx" onclick="this.src=this.src+&#39;?&#39;" alt="看不清换一张" id="VerfifyCodeImg">
    <a href="javascript:void(0)" onclick="$(&#39;#VerfifyCodeImg&#39;).attr(&#39;src&#39;,$(&#39;#VerfifyCodeImg&#39;).attr(&#39;src&#39;)+&#39;?&#39;)">看不清楚换一张</a></div>
    <input type="hidden" id="ArticalId" name="ArticalId" value="634455807983142445">
    <input type="submit" id="BtnPost" value="提交评论">
    <input type="hidden" id="ReIdList" name="ReIdList">
    </form>
</div>
<script type="text/javascript">
    KE.show({
        id: 'Message',
        resizeMode: 1,
        allowUpload: false,
        width: "700px",
        height: "220px",
        afterSetData: function (id) {
            KE.$('num').innerHTML = 600 - KE.count(id, 'text');
        },
        items: [
				'fontname', 'fontsize', '|', 'textcolor', 'bgcolor', 'bold', 'italic', 'underline',
				'removeformat', '|', 'justifyleft', 'justifycenter', 'justifyright', 'insertorderedlist',
				'insertunorderedlist', '|', 'emoticons', 'image', 'link', 'unlink']

    });
    var idStr = new Array();
    $(document).ready(function () {
        $("#NewCommentForm").submit(function () {
            var form = this;
            var msg = KE.count('Message', 'text');
            if (msg == 0) {
                alert("评论内容不能为空！"); return false;
            }
            else if (msg > 600) {
                alert("评论字数不能超过600"); return false;
            }
            var options = {
                url: 'http://www.itivy.com/jquery/NewComment',
                datatype: "json",
                type: 'post',
                beforeSend: function () { var btn = $("#BtnPost"); btn.val("提交中..."); btn.attr("disabled", true); },
                success: function (e) {
                    if (e.Success) {
                        InsertCommentDom(e.Data);
                        KE.text('Message', "");
                        $("#VerfifyCodeImg").trigger("click");
                        $("#VerifyCode").val("");
                        idStr = new Array();
                        $("#ReContainer").empty();
                        $("#ReIdList").val("");
                        var btn = $("#BtnPost"); btn.val("提交评论"); btn.attr("disabled", false);
                    }
                    else {
                        if (e.ErrorType == "1") {
                            location.href = "http://passport.itivy.com/common/login?ReturnUrl=http%3a%2f%2fwww.itivy.com%2fjquery%2farchive%2f2011%2f7%2f6%2fjquery-get-post-getjson-ajax.html";
                        }
                        alert(e.Message);
                        var btn = $("#BtnPost"); btn.val("提交评论"); btn.attr("disabled", false);
                    }
                }
            };
            $('#NewCommentForm').ajaxSubmit(options);
            return false;
        });

        function InsertCommentDom(data) {
            var str = '<li id=' + data.Id_Js + '>\
                                    <p class="user">\
                                    <span class="fb_op"><a href="javascript:void(0);" onclick="Reply(\'' + data.Creator.UserName + '\',\'' + data.Id_Js + '\')">回复</a> | \
                                    <a href="javascript:void(0)" onclick="DeleteComment(\'' + data.Id_Js + '\')">删除</a>\
                                    </span>' + ConertJsonTimeAndFormat(data.CreateTime, 'yyyy/MM/dd hh:mm:ss') + '\
                                     by <a href="' + data.Creator.BlogUrl + '">' + data.Creator.UserName + '</a></p>\
                                    <div class="text">' + data.Message + '</div>\
                           </li>';
            $(str).appendTo($("#commentlist"));

        }

    });

    function DeleteComment(id) {
        if (!confirm("确定删除该条评论吗?")) return;
        $.ajax({
            url: '/MyAdmin/DeleteComment',
            data: "id=" + id,
            type: 'post',
            dataType: 'json',
            success: function (e) {
                if (e.Success) {
                    $("#" + id + "").remove();
                }
                else {
                    if (e.ErrorType == "1") {
                        location.href = "http://passport.itivy.com/common/login?ReturnUrl=http%3a%2f%2fwww.itivy.com%2fjquery%2farchive%2f2011%2f7%2f6%2fjquery-get-post-getjson-ajax.html";
                    }
                    alert(e.Message);
                }
            }
        });
    }

    function Reply(user,id) {
        var msg = KE.html("Message");
        if (KE.count('Message', 'text') == 0)
            msg += "@" + user + ":";
        else
            msg += "<br/>@" + user + ":";
        KE.html("Message", msg);
        var container = $("#ReContainer");

        if ($("#" + user).length <= 0) {
            $('<div class="re_user"><a class="a_cancel" href="javascript:void(0);" onclick="javascript:CancelRe(\'' + id + '\');$(this).parent().remove();">取消回复</a>回复:<span id="' + user + '">' + user + '</span>').appendTo(container);
            idStr.push(id);
            $("#ReIdList").val(idStr.join(","));
        }
    }

    Array.prototype.remove = function (dx) {
        if (isNaN(dx) || dx > this.length) { return false; }
        for (var i = 0, n = 0; i < this.length; i++) {
            if (this[i] != this[dx]) {
                this[n++] = this[i]
            }
        }
        this.length -= 1
    }
    Array.prototype.indexOf = function (v) {
        for (var i = 0, n = this.length; i < n; i++) {
            if (this[i] == v) return i;
        }
        return -1;
    };
    function CancelRe(id) {
        idStr.remove(idStr.indexOf(id));
    }
</script>
    </div>

    </div>
    <p class="copyright">
        Copyright © <a href="http://www.itivy.com/jquery">jquery</a> 2011 . Powered by
            青藤园<br>
        <!--This theme is free for distriubtion,  so long as  link to openwebdesing.org and the sponsor link  stay on the theme-->
        <span class="nocopyright">Courtesy of <a href="http://www.openwebdesign.org/" target="_blank">
            Open Web Design</a> &amp; <a href="http://www.highervisibility.com/" target="_blank">
                highervisibility.com </a></span>
    </p>
    <div style="display: none">
    
        <script language="javascript" type="text/javascript" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/4473358.js"></script><a href="http://www.51.la/?4473358" target="_blank"><img alt="51.la 专业、免费、强健的访问统计" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/icon_0.gif" style="border:none"></a>
<img style="width:0px;height:0px" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/go.asp">
        <script type="text/javascript">
            var _bdhmProtocol = (("https:" == document.location.protocol) ? " https://" : " http://");
            document.write(unescape("%3Cscript src='" + _bdhmProtocol + "hm.baidu.com/h.js%3Fadd0db9dee36c7a9b64141788e26de72' type='text/javascript'%3E%3C/script%3E"));
</script><script src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/h.js" type="text/javascript"></script><a href="http://tongji.baidu.com/hm-web/welcome/ico?s=add0db9dee36c7a9b64141788e26de72" target="_blank"><img border="0" src="./深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法 - jQuery资源宝库 - 青藤园_files/21.gif" width="20" height="20"></a>
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-21395429-1']);
            _gaq.push(['_trackPageview']);

            (function () {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();
    </script>
    </div>


<div class="ke-reset" style="display: none;"></div><div class="ke-mask" style="opacity: 0.5;"></div></body></html>